import { Input, Button } from 'antd'
import { colors } from '@/desktop/styles'
import type { GroupAtWord } from '@/services/common/definition'
import './index.module.less'

export default function EditGroupAt(props: {
  word: GroupAtWord
  onSave: (word: GroupAtWord) => void
  onCancel: () => void
}) {
  const { word: initialWord, onSave, onCancel } = props

  const [word, setWord] = useState(initialWord)
  const onChange = useCallback(
    (e: React.ChangeEvent<HTMLTextAreaElement>) => setWord({ ...word, text: e.target.value }),
    [word],
  )

  return <>
    <main styleName="edit-text">
      <Input.TextArea rows={8} value={word.text} onChange={onChange} />
      <div css={tips}>仅群主和群管理员可成功 @ 所有人</div>
    </main>
    <footer>
      <Button onClick={onCancel}>取消</Button>
      <Button type="primary" disabled={!word.text.length} onClick={() => onSave(word)}>
        保存
      </Button>
    </footer>
  </>
}

const tips = css`
  color: ${colors.gray};
  font-size: 12px;
  margin-top: 12px;
`
